<script setup lang="ts">
// 个人中心页面
import { ref, onMounted } from 'vue'
import { ElRow, ElCol, ElCard, ElImage, ElButton, ElTabs, ElTabPane, ElIcon } from 'element-plus'
import { User, VideoCamera, Star, Clock, Setting } from '@element-plus/icons-vue'

// 用户信息
const userInfo = ref({
  id: 1,
  name: '张三',
  avatar: 'https://picsum.photos/100/100?random=1',
  signature: '前端开发工程师 | Vue.js爱好者 | 分享技术与生活',
  followers: 12800,
  following: 860,
  videos: 24,
  likes: 15600
})

// 用户视频数据
const userVideos = ref([
  {
    id: 1,
    title: 'Vue 3实战教程 - 从入门到精通',
    cover: 'https://picsum.photos/300/200?random=1',
    duration: '1:25:30',
    views: '12.8万',
    publishTime: '2天前'
  },
  {
    id: 2,
    title: 'Element Plus组件详解',
    cover: 'https://picsum.photos/300/200?random=2',
    duration: '45:20',
    views: '8.5万',
    publishTime: '1周前'
  },
  {
    id: 3,
    title: 'Pinia状态管理实战',
    cover: 'https://picsum.photos/300/200?random=3',
    duration: '38:45',
    views: '6.3万',
    publishTime: '2周前'
  },
  {
    id: 4,
    title: 'Vue Router 4深度解析',
    cover: 'https://picsum.photos/300/200?random=4',
    duration: '52:10',
    views: '9.7万',
    publishTime: '3周前'
  }
])

// 收藏的视频
const favoriteVideos = ref([
  {
    id: 101,
    title: 'React Hooks完全指南',
    cover: 'https://picsum.photos/300/200?random=101',
    duration: '1:15:20',
    views: '25.6万',
    author: 'React专家',
    publishTime: '1天前'
  },
  {
    id: 102,
    title: 'TypeScript高级技巧',
    cover: 'https://picsum.photos/300/200?random=102',
    duration: '58:45',
    views: '18.3万',
    author: 'TS大神',
    publishTime: '1周前'
  }
])

// 历史记录
const historyVideos = ref([
  {
    id: 201,
    title: 'Node.js后端开发实战',
    cover: 'https://picsum.photos/300/200?random=201',
    duration: '2:15:30',
    views: '32.1万',
    author: '后端大牛',
    publishTime: '刚刚'
  },
  {
    id: 202,
    title: 'Webpack 5配置详解',
    cover: 'https://picsum.photos/300/200?random=202',
    duration: '1:05:40',
    views: '14.7万',
    author: '构建专家',
    publishTime: '3小时前'
  },
  {
    id: 203,
    title: 'CSS Grid布局实战',
    cover: 'https://picsum.photos/300/200?random=203',
    duration: '32:15',
    views: '9.2万',
    author: 'UI设计师',
    publishTime: '1天前'
  }
])

// 格式化数字
const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

// 编辑资料
const editProfile = () => {
  console.log('编辑资料')
}

onMounted(() => {
  // 可以在这里加载用户数据
})
</script>

<template>
  <div class="profile-container">
    <!-- 用户信息卡片 -->
    <el-card class="user-card">
      <el-row :gutter="20">
        <el-col :span="6" class="avatar-col">
          <el-image 
            :src="userInfo.avatar" 
            class="user-avatar"
            fit="cover"
          />
        </el-col>
        <el-col :span="18">
          <div class="user-info">
            <h2 class="user-name">{{ userInfo.name }}</h2>
            <p class="user-signature">{{ userInfo.signature }}</p>
            <div class="user-stats">
              <div class="stat-item">
                <span class="stat-number">{{ formatNumber(userInfo.followers) }}</span>
                <span class="stat-label">粉丝</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ formatNumber(userInfo.following) }}</span>
                <span class="stat-label">关注</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ userInfo.videos }}</span>
                <span class="stat-label">视频</span>
              </div>
              <div class="stat-item">
                <span class="stat-number">{{ formatNumber(userInfo.likes) }}</span>
                <span class="stat-label">获赞</span>
              </div>
            </div>
            <el-button type="primary" @click="editProfile">编辑资料</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 内容标签页 -->
    <el-tabs type="border-card" class="profile-tabs">
      <el-tab-pane>
        <template #label>
          <el-icon><VideoCamera /></el-icon>
          <span>我的视频</span>
        </template>
        
        <el-row :gutter="20" class="video-grid">
          <el-col 
            v-for="video in userVideos" 
            :key="video.id" 
            :xs="24" :sm="12" :md="8" :lg="6" 
            class="video-item"
          >
            <el-card 
              shadow="hover" 
              class="video-card"
              @click="$router.push(`/video/${video.id}`)"
            >
              <div class="video-cover">
                <el-image 
                  :src="video.cover" 
                  class="cover-image"
                  fit="cover"
                  :alt="video.title"
                />
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title" :title="video.title">{{ video.title }}</h3>
                <div class="video-meta">
                  <span class="video-views">{{ video.views }} 次观看</span>
                  <span class="video-time">{{ video.publishTime }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <el-icon><Star /></el-icon>
          <span>收藏</span>
        </template>
        
        <el-row :gutter="20" class="video-grid">
          <el-col 
            v-for="video in favoriteVideos" 
            :key="video.id" 
            :xs="24" :sm="12" :md="8" :lg="6" 
            class="video-item"
          >
            <el-card 
              shadow="hover" 
              class="video-card"
              @click="$router.push(`/video/${video.id}`)"
            >
              <div class="video-cover">
                <el-image 
                  :src="video.cover" 
                  class="cover-image"
                  fit="cover"
                  :alt="video.title"
                />
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title" :title="video.title">{{ video.title }}</h3>
                <p class="video-author">{{ video.author }}</p>
                <div class="video-meta">
                  <span class="video-views">{{ video.views }} 次观看</span>
                  <span class="video-time">{{ video.publishTime }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <el-icon><Clock /></el-icon>
          <span>历史记录</span>
        </template>
        
        <el-row :gutter="20" class="video-grid">
          <el-col 
            v-for="video in historyVideos" 
            :key="video.id" 
            :xs="24" :sm="12" :md="8" :lg="6" 
            class="video-item"
          >
            <el-card 
              shadow="hover" 
              class="video-card"
              @click="$router.push(`/video/${video.id}`)"
            >
              <div class="video-cover">
                <el-image 
                  :src="video.cover" 
                  class="cover-image"
                  fit="cover"
                  :alt="video.title"
                />
                <div class="video-duration">{{ video.duration }}</div>
              </div>
              <div class="video-info">
                <h3 class="video-title" :title="video.title">{{ video.title }}</h3>
                <p class="video-author">{{ video.author }}</p>
                <div class="video-meta">
                  <span class="video-views">{{ video.views }} 次观看</span>
                  <span class="video-time">{{ video.publishTime }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-tab-pane>
      
      <el-tab-pane>
        <template #label>
          <el-icon><Setting /></el-icon>
          <span>设置</span>
        </template>
        
        <div class="settings-content">
          <h3>账户设置</h3>
          <p>这里可以添加账户设置相关的功能</p>
          
          <h3 style="margin-top: 30px;">隐私设置</h3>
          <p>这里可以添加隐私设置相关的功能</p>
          
          <h3 style="margin-top: 30px;">通知设置</h3>
          <p>这里可以添加通知设置相关的功能</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped>
.profile-container {
  padding: 20px;
}

.user-card {
  margin-bottom: 20px;
}

.user-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.user-info {
  padding-top: 10px;
}

.user-name {
  margin: 0 0 10px 0;
  font-size: 24px;
  font-weight: bold;
}

.user-signature {
  margin: 0 0 20px 0;
  color: #909399;
}

.user-stats {
  display: flex;
  margin-bottom: 20px;
}

.stat-item {
  margin-right: 30px;
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  font-size: 14px;
  color: #909399;
}

.profile-tabs {
  min-height: 500px;
}

.video-grid {
  margin-top: 20px;
}

.video-item {
  margin-bottom: 20px;
}

.video-card {
  cursor: pointer;
  transition: transform 0.2s;
}

.video-card:hover {
  transform: translateY(-5px);
}

.video-cover {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 4px;
}

.cover-image {
  width: 100%;
  height: 100%;
}

.video-duration {
  position: absolute;
  bottom: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 5px;
  border-radius: 2px;
  font-size: 12px;
}

.video-info {
  padding: 10px 0;
}

.video-title {
  margin: 0 0 8px 0;
  font-size: 14px;
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-author {
  margin: 0 0 5px 0;
  font-size: 12px;
  color: #909399;
}

.video-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #909399;
}

.settings-content {
  padding: 20px;
}

.settings-content h3 {
  margin-bottom: 15px;
}

.settings-content p {
  color: #909399;
}
</style>